<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>学生主页</title>
    <link rel="icon" href="https://id.dlmu.edu.cn/linkid/api/image/download/1638532905597favicon3232.png">
    <link rel="stylesheet" href="../css/bootstrap.min.css">
    <script src="../js/bootstrap.bundle.min.js"></script>

    <link rel="stylesheet" href="../css/header.css">
    <link rel="stylesheet" href="../css/student.css">
    <link rel="stylesheet" href="../css/body.css">
    <script src="../js/header.js"></script>
    <script src="../js/student.js"></script>
</head>
<body>
<div class="container-fluid body">
    <div>
        <header class="d-flex flex-wrap justify-content-center py-3 mb-4 border-bottom">
            <div class="d-flex align-items-center mb-3 mb-md-0 me-md-auto text-dark text-decoration-none">
                <div class="logo"></div>
                <span class="fs-4">学生日常请销假管理系统</span>
            </div>

            <div class="dropdown" style="position: relative;right: 4%;">
                <div class="personal-pic dropdown-toggle" data-bs-toggle="dropdown"></div>
                <ul class="dropdown-menu" style="min-width: auto;">
                    <li>
                        <button id="logout" class="dropdown-item">退出</button>
                    </li>
                </ul>
            </div>
        </header>
    </div>

    <div class="d-flex flex-column flex-shrink-0 p-3 bg-light f-side-bar">
        <div class="fs-4" style="text-align: center">功能列表</div>
        <hr>
        <ul class="nav nav-tabs flex-column mb-auto">
            <li class="nav-item" style="padding-bottom: 15px">
                <a href="javascript:void(0);" class="nav-link active link-dark" data-bs-toggle="tab" data-bs-target="#info">
                    <div class="side-tab-pic-1"></div>
                    <span class="side-tab-desc">个人信息</span>
                </a>
            </li>
            <li class="nav-item" style="padding-bottom: 15px">
                <a href="javascript:void(0);" class="nav-link link-dark" data-bs-toggle="tab" data-bs-target="#leave">
                    <div class="side-tab-pic-2"></div>
                    <span class="side-tab-desc">填写请假单</span>
                </a>
            </li>
            <li class="nav-item">
                <a href="javascript:void(0);" class="nav-link link-dark" data-bs-toggle="tab" data-bs-target="#history">
                    <div class="side-tab-pic-3"></div>
                    <span class="side-tab-desc">历史请假单</span>
                </a>
            </li>
        </ul>
        <hr>
    </div>

    <div class="tab-content" style="margin-left: 280px">
        <div id="info" class="tab-pane fade show active">
            <div class="div-row">
                <div id="photo" class="info-pic"></div>
                <div class="info-pic-right">
                    <div id="name" class="info-name">张三</div>
                    <div class="info-phone">手机号: <span id="phone">12345678901</span></div>
                </div>
            </div>
            <hr class="f-hr"/>
            <div class="div-row">
                <div class="info-title">基本信息</div>
                <div class="info-attr">姓名：<span id="i-name" class="info-value">张三</span></div>
                <div class="info-attr">学号：<span id="i-code" class="info-value">1234567890</span></div>
                <div class="info-attr">类型：<span id="i-type" class="info-value">本科</span></div>
                <br/><br/><br/><br/>
                <div class="info-attr">性别：<span id="i-sex" class="info-value">男</span></div>
                <div class="info-attr">学院：<span id="i-college" class="info-value">信息科学技术学院</span></div>
                <div class="info-attr">中队：<span id="i-square" class="info-value">2018-1</span></div>
            </div>
        </div>
        <div id="leave" class="tab-pane fade">
            <div class="leave-wrapper">
                <div class="leave-title">出入校审批单</div>
                <div class="leave-row">
                    <div class="leave-item-3-1"><label>姓名：<br/><input id="l-name" type="text" disabled></label></div>
                    <div class="leave-item-3-1"><label>学院：<br/><input id="l-college" type="text" disabled></label></div>
                    <div class="leave-item-3-1"><label>中队：<br/><input id="l-square" type="text" disabled></label></div>
                </div>
                <div class="leave-row">
                    <div class="leave-item-3-1"><label>性别：<br/><input id="l-sex" type="text" disabled></label></div>
                    <div class="leave-item-3-1"><label>学号：<br/><input id="l-code" type="text" disabled></label></div>
                    <div class="leave-item-3-1"><label>联系方式：<br/><input id="l-phone" type="text" disabled></label></div>
                </div>
                <div class="leave-row">
                    <div class="leave-item-3-1">
                        <label>
                            外出区域：
                            <input id="l-area" class="input-text" type="text">
                        </label>
                    </div>
                    <div class="leave-item-3-2">
                        <label>
                            外出时间：&nbsp;自&nbsp;
                            <input id="l-time-start" class="input-text" type="date">
                        </label>
                        <label>
                            &nbsp;&nbsp;&nbsp;&nbsp;至&nbsp;&nbsp;&nbsp;&nbsp;
                            <input id="l-time-end" class="input-text" type="date">
                        </label>
                    </div>
                </div>
                <div class="leave-row">
                    <div style="float: left; height: 52px; line-height: 52px">
                        外出事由：
                    </div>
                    <div style="float: left">
                        <div class="input-group input-group-text">
                            <input type="radio" name="reason-radio" id="radio1" autocomplete="off" value="教学科研" checked>
                            <label class="btn" for="radio1">教学科研&nbsp;&nbsp;&nbsp;&nbsp;</label>

                            <input type="radio" name="reason-radio" id="radio2" autocomplete="off" value="实习实践">
                            <label class="btn" for="radio2">实习实践&nbsp;&nbsp;&nbsp;&nbsp;</label>

                            <input type="radio" name="reason-radio" id="radio3" autocomplete="off" value="求职应聘">
                            <label class="btn" for="radio3">求职应聘&nbsp;&nbsp;&nbsp;&nbsp;</label>

                            <input type="radio" name="reason-radio" id="radio4" autocomplete="off" value="培训考试">
                            <label class="btn" for="radio4">培训考试&nbsp;&nbsp;&nbsp;&nbsp;</label>

                            <input type="radio" name="reason-radio" id="radio5" autocomplete="off" value="生病就医">
                            <label class="btn" for="radio5">生病就医&nbsp;&nbsp;&nbsp;&nbsp;</label>

                            <input type="radio" name="reason-radio" id="radio6" autocomplete="off" value="其他事由">
                            <label class="btn" for="radio6">其他事由</label>
                        </div>
                    </div>
                </div>
                <div class="leave-row row">
                    <label>
                        事由描述：<br/><br/>
                        <textarea id="reason-text" class="form-control col-12" rows="5"></textarea>
                    </label>
                </div>
                <div class="leave-row">
                    <button id="leave-confirm" class="leave-confirm btn btn-outline-primary">提交</button>
                </div>
                <br/>
            </div>
        </div>
        <div id="history" class="tab-pane fade">
            <div class="container">
                <table id="history-table" class="table table-hover">
                    <thead>
                    <tr>
                        <th>时间</th>
                        <th>理由</th>
                        <th>状态</th>
                        <th style="width: 10%"></th>
                    </tr>
                    </thead>
                    <tbody>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>
</body>
</html>